<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>homework1下拉菜单</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<style>
    body {
        width: auto;
    }
    a {
        text-decoration: none;
        display: block;
        color: #fff;
        width: 120px;
        height: 40px;
        /* line-height: 40px; */
        border-width: 1px 1px 0 0;
        background: red;
    }
    li {
        list-style-type: none;
    }
    #app{
        width: auto;
        height: 40px;
        background-color: red;
        /* 横向和纵向都居中 */
        display: flex;
        /* 默认的主轴是x轴row, justify-content: center 沿着主轴居中对齐 */
        justify-content: center;
        /* 侧轴居中 */
        align-items: center;
    }
    #app > li{
        list-style-type: none;
        float: left;
        text-align: center;
        position: relative;
    }
    /* a：hover属性表示鼠标悬停时的状态  对应一级标题鼠标悬停效果*/
    #app li a:hover{
        color:#fff;
        background: rgb(245, 76, 76);
    }
    /* a：hover属性表示鼠标悬停时的状态  对应二级标题鼠标悬停效果*/
    #app ul li a:hover{
        color:#fff;
        background: rgb(216, 2, 2);
    }
    #app li ul{
        position: absolute;
        left: -40px;
        top: 40px;
        margin-top: 1px;
        font-size: 12px;
    }
    /* 二级标题样式 */
    ul  li a{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    [v-cloak]{
        display: none;
    }
</style>
<body>
    <!-- 马人和209001115 -->
    <div id="app" v-cloak></div>
    <template id="root">
        <!-- 用来循环第一层列表 -->
        <!-- mouseover鼠标进入，mouseout鼠标离开 -->
        <li v-for="menu in menus" @mouseover="menu.show = !menu.show" @mouseout="menu.show = !menu.show">
            <a :href="menu.url">
                {{menu.name}}<br>
                {{menu.englishName}}
            </a>
            <ul v-show="menu.show">
                <li v-for="subMenu in menu.subMenus">
                    <a :href="subMenu.url">{{subMenu.name}}</a>
                </li>
            </ul>
        </li>
    </template>
</body>
<script>
    const app = Vue.createApp({
        template: '#root',
        data() {
            return {
                menus: [
                    {
                        name: '首页',
                        englishName:'Home',
                        show: true,//用show来表示标记当前鼠标是否悬停于列表上
                        url: '#',
                    },
                    {
                        name: '关于红岩',
                        englishName:'HongYan',
                        show: false,
                        url: '#',
                        subMenus: [
                            { name: '红岩文化', url: '#' },
                            { name: '博物馆机构', url: '#' },
                            { name: '历史沿革', url: '#' }
                        ]
                    },
                    {
                        name: '公告动态',
                        englishName:'Dynamics',
                        show: false,
                        url: '#',
                        subMenus: [
                            { name: '文博信息' },
                            { name: '政务平台' },
                            { name: '公告' },
                            { name: '专题报道' }
                        ]
                    },
                    {
                        name: '馆藏精品',
                        englishName: 'Collections',
                        show: false,
                        url: '#',
                        subMenus: [
                            { name: '一级文物', url: '#' },
                            { name: '二级文物', url: '#' },
                            { name: '三级文物', url: '#' }
                        ]
                    },
                    {
                        name: '陈列展览',
                        englishName:'Exhibition',
                        show: false,
                        url: '#',
                        subMenus: [
                            { name: '虚拟展览' },
                            { name: '基本展览' },
                            { name: '复原展览' },
                            { name: '临时展览' },
                            { name: '展览交流' }
                        ]
                    },
                    {
                        name: '研究开发',
                        englishName: 'Research',
                        show: false,
                        url: '#',
                        subMenus: [
                            { name: '历史研究', url: '#' },
                            { name: '艺术创作', url: '#' },
                            { name: '影音在线', url: '#' },
                            { name: '文创产品', url: '#' }
                        ]
                    },
                    {
                        name: '公共教育',
                        englishName: 'Education',
                        show: false,
                        url: '#',
                        subMenus: [
                            { name: '党性教育', url: '#' },
                            { name: '爱国主义教育', url: '#' },
                            { name: '研学实践教育', url: '#' },
                            { name: '科普教育', url: '#' }
                        ]
                    },
                    {
                        name: '参观服务',
                        englishName: 'Service',
                        show: false,
                        url: '#',
                        subMenus: [
                            { name: '景点介绍', url: '#' },
                            { name: '服务内容', url: '#' },
                            { name: '网上预约', url: '#' },
                            { name: '志愿服务', url: '#' }
                        ]
                    },{
                        name: '网上预约',
                        englishName:'Reservation',
                        show: true,//用show来表示标记当前鼠标是否悬停于列表上
                        url: '#',
                    }
                ]
            }
        }
    })
    app.mount('#app')
</script>

</html>